Why inline and width does not work in CSS

"Why inline and width does not work?" this is probably one of those tickets where junior/inexperienced developers often take a lot of time to resolve (yes, I was one of them some time ago). This happens because we assume that we understood how HTML and CSS work and try to force CSS to accept our solution, like !important keywords etc.

In web development, Cascading Style Sheets (CSS) are crucial for styling web pages. But it is as well more crucial to understand certain things upfront and not just heading to Stackoverflow and copy paste different suggestions.

However, developers often encounter a confusing scenario: "Why inline and width does not work?". So let's have a look what is behind the issue, so you can have your "Ooooh, that's why" moment.

Understanding Display: Inline

Firstly, it's essential to understand the display property in CSS, which dictates how elements are displayed on a page. The inline value is one such display property. When you set an element to display: inline;, it means that the element will not start on a new line and only occupy just enough width to fit its content.

This behavior is similar to how words in a sentence flow. This is probably the key take away to remember!

The Issue with Width and Inline

The main issue arises when developers try to combine inline display with a width property. When an element is set to display: inline;, the width and height properties do not work as one might expect. This is because inline elements are not designed to accept dimensions like width and height. Their main purpose is to flow within text content, like spans of text or anchor tags in a paragraph.

Why Inline and Width Does Not Work

To understand why inline and width does not work, it's crucial to grasp the concept of formatting contexts in CSS. Inline elements participate in an inline formatting context, which is different from a block formatting context. In an inline formatting context, boxes are laid out horizontally, one after the other, and they only break to a new line at the end of the containing block, or at a forced line break.

This means that when you try to apply a width to an element that is display: inline;, the browser ignores it. The width of inline elements is determined by their content and not by explicit dimensions set through CSS.

Alternatives and Solutions

If you need to control the width of an element, you should consider using display: inline-block; or display: block;. The inline-block value combines features of both block and inline: it allows elements to sit next to each other while still accepting width and height values.

The solution - at the end - is pretty simple. But I guess, since you are reading this article, you have already spent a good amount of time with this issue.